<template>
  <!-- <div class="app-header-container">
    <div class="top-nav">
      <div class="container top-nav-container">
        <div class="contact">客服热线: 400-0000-000</div>
        <div class="welcome">欢迎来到房车新旅程!</div>
        <div class="user-auth">
          <template v-if="isLogin">
            <div class="username" @click="link('/user/home')">{{user.username}}</div>
            <div class="logout" @click="logout">退出</div>
          </template>
          <template v-if="!isLogin">
            <div class="login" @click="link('/user/login')">登录</div>
            <div class="register" @click="link('/user/register')">注册</div>
          </template>
        </div>
      </div>
    </div>
    <div class="header">
      <div class="container header-container">
        <div class="logo" style="margin-top:20px;">
          <div class="logo-img" @click="link('/')">
            <img src="/logo.jpg" />
          </div>
          <div class="logo-text">
            <div class="text1">景在变</div>
            <div class="text2">家不变</div>
          </div>
        </div>
        <div class="menu-items">
          <NLink class="item" :to="{path:'/'}" :class="{'current':currentMenu=='/'}">首页</NLink>
          <NLink class="item" :to="{path:'/product/list'}" :class="{'current':currentMenu=='/product/list'}">车辆租赁</NLink>
          <NLink class="item" :to="{path:'/wiki/list'}" :class="{'current':currentMenu=='/wiki/list'}">房车百科</NLink>
          <NLink class="item" :to="{path:'/guide/list'}" :class="{'current':currentMenu=='/guide/list'}">自驾攻略</NLink>
          <NLink class="item" :to="{path:'/about'}" :class="{'current':currentMenu=='/about'}">关于我们</NLink>
        </div>
      </div>
    </div>
    <div class="h5-header">
      <span class="back" @click="goBack" v-if="showBack"><i class="el-icon-arrow-left"></i></span>
      <span class="title">{{title}}</span>
      <el-dropdown trigger="click" style="position:absolute;right:10px;top:10px;">
        <span class="el-dropdown-link">
          <i class="el-icon-menu el-icon--right" style="font-size:20px;"></i>
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item @click.native="link('/')">首页</el-dropdown-item>
          <el-dropdown-item @click.native="link('/product/list')">租车</el-dropdown-item>
          <el-dropdown-item @click.native="link('/wiki/list')">百科</el-dropdown-item>
          <el-dropdown-item @click.native="link('/guide/list')">发现</el-dropdown-item>
          <el-dropdown-item @click.native="link('/user/home')">我的</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>

    <div class="h5-bottom" v-if="showBottom">
      <div class="icons">
        <div class="item"  @click="link('/')">
          <div class="icon">
            <img src="/Home_disable.png" v-if="currentMenu!=='/'" />
            <img src="/Home_enable.png" v-if="currentMenu=='/'" />
          </div>
          <div class="text">首页</div>
        </div>
        <div class="item" @click="link('/product/list')">
          <div class="icon">
            <img src="/Rent_disable.png" v-if="currentMenu!=='/product/list'" />
            <img src="/Rent_enable.png" v-if="currentMenu=='/product/list'" />
          </div>
          <div class="text">租车</div>
        </div>
        <div class="item"  @click="link('/wiki/list')">
          <div class="icon">
            <img src="/Wiki_disable.png" v-if="currentMenu!=='/wiki/list'" />
            <img src="/Wiki_enable.png" v-if="currentMenu=='/wiki/list'" />
          </div>
          <div class="text">百科</div>
        </div>
        <div class="item" @click="link('/guide/list')">
          <div class="icon">
            <img src="/Discover_disable.png" v-if="currentMenu!=='/guide/list'" />
            <img src="/Discover_enable.png" v-if="currentMenu=='/guide/list'" />
          </div>
          <div class="text">发现</div>
        </div>
        <div class="item" @click="link('/user/home')">
          <div class="icon">
            <img src="/My_disable.png" v-if="currentMenu!=='/user/home'" />
            <img src="/My_enable.png" v-if="currentMenu=='/user/home'" />
          </div>
          <div class="text">我的</div>
        </div>
      </div>
    </div>

  </div> -->

  <div class="header-container">
    <div class="container-left">
      <span>广州工程技术职业学院</span>
      <span>艺术设计学院</span>
    </div>
    <div class="container-right">
      <div v-for="(item,i) in menuList" :class="{'option-link':true, 'option-link-active': isActive == i}" :key="item.id"><div @click="isActive=i"><nuxt-link :to="item.url">{{item.title}}</nuxt-link></div></div>
      <!-- <div class="option-link"><a href="#">学校概况</a></div>
      <div class="option-link"><a href="#">专业介绍</a></div>
      <div class="option-link"><a href="#">数字化创意设计工作室</a></div>
      <div class="option-link"><a href="#">数字展馆</a></div>
      <div class="option-link"><a href="#">荣誉榜</a></div> -->
    </div>
  </div>
</div>
</template>
<script>
import Cookie from 'js-cookie'

export default {
  data () {
    return {
      appHeadHasColor: this.hasColor,
      isLogin: false,
      user: {
        avatar: '',
        username: ''
      },
      menuList: [
        {id:1, title:'首页', url:'/index/home'},
        {id:2, title:'学校概况', url:'/index/info'},
        {id:3, title:'专业介绍', url:'/index/intro'},
        {id:4, title:'数字化创意设计工作室', url:'/index/studio'},
        {id:5, title:'数字展馆', url:'/index/pavilion'},
        {id:6, title:'荣誉榜', url:'/index/honor'}
      ],
      isActive: 0
    }
  },
  props: {
    // showBottom:{
    //   type: Boolean,
    //   default: false
    // },
    // showBack:{
    //   type: Boolean,
    //   default: true
    // },
    // title:{
    //   type: String,
    //   default: ''
    // },
    // currentMenu:{
    //   type: String,
    //   default: '/'
    // },
    // hasColor:{
    //   type: Boolean,
    //   default: true
    // },
    // watchScroll:{
    //   type: Boolean,
    //   default: true
    // },
    // showLogo:{
    //   type: Boolean,
    //   default: true
    // },
    // showHeaderContent:{
    //   type: Boolean,
    //   default: true
    // },
    // showPublishAction: {
    //   type: Boolean,
    //   default: true
    // },
    // height100: {
    //   type: Boolean,
    //   default: false
    // },
  },
  mounted() {
    // this.isLogin = Cookie.get('token') ? true : false
    // if (this.isLogin) {
    //   this.user.avatar = Cookie.get('avatar')
    //   this.user.username = Cookie.get('username')
    // }
  },
  computed: {

  },
  components: {

  },
  methods: {
    // goBack() {
    //   this.$router.go(-1);
    // },
    // link(path) {
    //   this.$router.push({path:path})
    // },
    // logout() {
    //   Cookie.remove('token')
    //   Cookie.remove('avatar')
    //   Cookie.remove('username')
    //   this.$store.commit('setGlobalToken', null)
    //   this.isLogin = false
    //   window.location.reload()
    // }
  }
}
</script>
<style lang="scss" scoped>
.header-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #222831;
  color: #eee;
  height: max-content;
  font-size: 16px;
  line-height: 24px;
  min-height: 0;
  padding: 0 50px;
  .container-left {
    display: flex;
    flex-direction: column;
    color: #ffbe00;
    font-weight: 700;
    text-align: center;
    padding: 12px 0;
    cursor: pointer;

  }
  .container-right {
    display: flex;
    font-size: 14px;
    box-sizing: border-box;
    .option-link {
      padding: 4px 8px;
      margin: 0 4px;
      border-bottom: 2px solid transparent;
      transition: border .4s;
      box-sizing: border-box;
      a {
        text-decoration: none;
        color: #ffbe00;
      }
    }
    .option-link-active {
      border-bottom: 2px solid #ffbe00;
    }
  }
}
// .app-header-container{
//   background-color: white;
// }
// .header{
//   display: flex;
// }
// .header .logo{
//
// }
// .logo-img{
//   cursor: pointer;
// }
// .login{
//   cursor: pointer;
//   margin-right: 10px;
// }
// .register{
//   cursor: pointer;
// }
// .username{
//   cursor: pointer;
//   margin-right: 10px;
// }
// .logout{
//   cursor: pointer;
// }
//
// .logo-img img{
//   height: 70px;
//   margin-top: -10px;
// }
// .header .logo-text{
//   margin-left: 20px;
// }
// .form-input{
//   margin: 10px 0;
// }
// .banner-window{
//   width: 1200px;
//   margin: 0 auto;
//   position: relative;
//   z-index: 100;
//   height: 500px;
// }
// .top-nav{
//   background: #f5f6f7;
//   line-height: 40px;
//   height: 40px;
//   color: #4d4d4d;
//   font-size: 14px;
//   border-top: 1px solid #e6e6e6;
//   border-bottom: 1px solid #e6e6e6;
// }
// .container{
//   width: 1200px;
//   margin:0 auto;
// }
//
// .menu-items{
//  overflow: hidden;
//  margin-right: 30px;
// }
//
// .menu-items .item{
//  float: left;
//  margin-left: 50px;
//  height: 80px;
//  line-height: 80px;
//  cursor: pointer;
//  text-decoration: none;
//  color:black;
// }
//
// .menu-items .current{
//  border-bottom:2px solid #0769f2;
// }
//
// .top-nav-container{
//  display: flex;
// }
//
// .top-nav-container .contact{
//   flex: 1;
// }
// .user-auth{
//   display: flex;
//   margin-left: 200px;
// }
// .header{
//   height: 80px;
// }
// .header-container{
//   display: flex;
// }
// .header-container .logo{
//   display: flex;
//   flex:1;
// }
// .logo-text{
//   line-height: 18px;
//   left: 120px;
//   font-size: 18px;
//   color: #1a1a1a;
//   border-left: 1px solid grey;
//   padding-left: 20px;
//   height: 50px;
// }
// .logo-text .text2{
//   margin-top: 10px;
// }
// .h5-header{
//   display: none;
// }
// .h5-bottom{
//   display: none;
// }
// @media (max-width: 480px){
// .container{width:100%;}
// .top-nav{display: none;}
// .header{display: none;}
// .h5-header{
//   display: block;
//   background-color: #f7f9fa;
//   width: 100%;
//   text-align: center;
//   position: fixed;
//   z-index: 1000;
//   top: 0;
//   .title{
//     display: inline-block;
//     color:#333;
//     line-height: 25px;
//     padding: 10px 0;
//   }
// }
//
// .back{
//   position:absolute;
//   left:0px;
//   top:0px;
//   padding:10px;
// }
// .h5-bottom{
//   background-color: white;
//   border-top:1px solid #eee;
//   position: fixed;
//   z-index: 10000;
//   bottom: 0;
//   width:100%;
//   display: block;
//   .icons{
//     display: flex;
//     justify-content: space-between;
//     .item{
//       padding: 10px;
//       flex:1;
//       text-align: center;
//       display: flex;
//       flex-direction: column;
//       align-items: center;
//       color:#333;
//       .icon{
//         width:25px;
//         height:25px;
//         //background-color: #eee;
//         img{
//           width: 100%;
//           height: 100%;
//         }
//       }
//       .text{
//         margin-top:5px;
//       }
//     }
//
//   }
// }
// }
</style>
